<!DOCTYPE html >
<!--引入：thymeleaf的头部前缀 -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- @{} 是thymeleaf表示 需要向后端发请求-->
    <script th:src="@{/static/js/vue.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/elementui.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/axios.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/axios.interceptor.js}" type="text/javascript"></script>
    <link th:href="@{/static/css/elementui.css}" rel="stylesheet" type="text/css">
    <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
    <style>
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
            display: flex;
            justify-content: center;  /* 水平居中 */
            align-items: center;      /* 垂直居中 */
            color: white;             /* 文字颜色为白色 */
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .container{
            width: 500px;
            margin: 0 auto;
            border: 1px solid #99a9bf;
            padding: 50px;
            border-radius: 10px;
        }

    </style>

</head>
<body >
<div id="app">
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple-dark">艾瑞图书商城</div></el-col>
            </el-row>
        </el-header>
        <el-main>
            <!--登录表单-->
            <div class="container">
                <el-form ref="lf" :model="form" label-width="80px">
                    <el-form-item label="登录名称">
                        <el-input v-model="form.loginName"></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码">
                        <el-input v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="login()">登录</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-main>
    </el-container>
</div>
</body>
<script>
    let app = new Vue({
        el:"#app",
        data(){
            return {
                form:{
                    loginName:"",
                    password :""
                }
            }
        },
        methods:{
            login(){
                //axios 在POST方法中，自动将 JS对象转换为JSON
                axios.post('/user/login',this.form)
                    .then((res)=> {
                        if(res.data.code == 200){
                            let token = res.data.datas.token;
                            let userName = res.data.datas.userName;
                            //前端：Cookie , SessionStorage  LocalStorage
                            localStorage.setItem("token",token);
                            localStorage.setItem("userName",userName);

                            this.$message.success("2S后，进入主页面！");

                            setTimeout(()=>{
                                window.location.href = '/page/toIndex';
                            },2000)

                        }else{
                            this.$message.error(res.data.msg);
                        }
                    })
                    .catch((error)=> {
                        console.log(error);
                    });
            }
        },
        created(){

        }
    });
</script>
</html>